<template>
    <!-- <div> -->
    <el-card style="height: 80px;">
        <el-form :inline="true" class="form">
            <el-form-item label="栏目">
                <el-select v-model="keyColumnId">
                    <el-option v-for="(item, index) in allColumn" :key="item.columnId" :label="item.columnTitle"
                        :value="item.columnId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文章标题:">
                <el-input placeholder="请你输入搜索关键字" v-model="keyword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="default" :disabled="isDisabled" @click="search">搜索</el-button>
                <el-button type="primary" size="default" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card class="box-card" style="margin: 10px 0px;">
        <div v-show="scene === 0">
            <el-button type="primary" size="default" icon="Plus" @click="showAddDialog"
                v-has="`btn.Trademark.add`">添加</el-button>
            <!-- 表格组件：用于展示已有得平台数据 -->
            <!-- table:---border:可以设置表格纵向是否有边框
                table-column:---label:某一个列表 ---width:设置这列宽度 ---align:设置这一列对齐方式    
            -->
            <el-table style="margin:10px 0px" border :data="tableValuekArr">
                <el-table-column label="排序" prop="seq" width="90px"></el-table-column>
                <el-table-column label="标题" prop="articleTitle" width="200px"></el-table-column>
                <el-table-column label="栏目" prop="column.columnTitle" width="130px"></el-table-column>
                <el-table-column label="显示" prop="display" width="80px">
                    <template #="{ row, $index }">
                        <el-icon size="20" :color="row.display === 1 ? 'green' : 'orange'">
                            <component :is="row.display === 1 ? 'View' : 'Hide'"></component>
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column label="收费" prop="charge" width="60px">
                    <template #="{ row, $index }">
                        <el-tooltip :content="row.charge === 0 ? '免费' : '收费'" placement="top">
                            <el-icon size="20" :color="row.charge === 0 ? 'orange' : 'green'">
                                <component :is="row.charge === 0 ? 'Unlock' : 'lock'"></component>
                            </el-icon>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="布局" width="80px" prop="layout">
                    <template #="{ row, $index }">
                        <span v-if="row.layout === 0" style="color: blue;">页面</span>
                        <span v-else-if="row.layout === 1" style="color: green;">音频</span>
                        <span v-else-if="row.layout === 2" style="color: red;">视频</span>
                        <span v-else style="color: rgb(236, 119, 17);">未设置</span>
                    </template>
                </el-table-column>
                <el-table-column label="浏览数" prop="articleReads"></el-table-column>
                <el-table-column label="更新时间" prop="articleCtime"></el-table-column>

                <el-table-column label="操作" width="200px">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small" icon="View" @click="updateArticle(row)"></el-button>
                        <el-button type="primary" size="small" icon="Edit" @click="updateArticle(row)"></el-button>
                        <el-popconfirm :title="`您确定要删除【${row.articleTitle}?】`" width="250px" icon="Delete"
                            @confirm='remove(row.articleId)'>
                            <template #reference>
                                <el-button type="warning" size="small" icon="Delete"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[5, 7, 9, 11]"
                :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
                @current-change="getArticleList" @size-change="handler" />
        </div>
        <!-- 添加SPU|修改SPU子组件 -->
        <ArticleForm ref="refArticleForm" v-show="scene == 1" @changeScene="changeScene"></ArticleForm>
    </el-card>
</template>

<script setup lang="ts">
import { ElMessage, UploadProps } from 'element-plus'
import ArticleForm from "./articleForm.vue"

//引入组合式API函数ref
import { ref, onMounted, computed, reactive, nextTick } from 'vue';
import { reqArticleList, reqDeleteArticle } from '@/api/content/article';
import type { TArticleListResponseData, TArticle, Records } from '@/api/content/article/type'

import { reqColumnList } from '@/api/content/column'
import type { TColumn, TColumnListResponseData, } from '@/api/content/column/type'

//默认页码
let pageNo = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(5);
//用户总个数
let total = ref<number>(0);

let keyword = ref<string>('');
let keyColumnId = ref<string>('');

//场景的数据
let scene = ref<number>(0); //0:显示已有SPU  1:添加或者修改已有SPU 

//存储已有品牌的数据
let tableValuekArr = ref<Records>([]);
//控制对话框显示与隐藏

let refArticleForm = ref<any>();

const changeScene = (obj: any) => {
    scene.value = obj.flag;
    if (obj.params == 'update') {
        //更新留在当前页
        getArticleList(pageNo.value);
    } else {
        //添加留在第一页
        getArticleList();
    }
}

const search = () => {
    //根据关键字获取相应的用户数据
    getArticleList();
}

const reset = ()=>{
    keyColumnId.value = ''
    keyword.value = ''
    getArticleList();
}

const updateArticle = (row: TArticle) => {
    //切换为场景1:添加与修改已有SPU结构->SpuForm
    scene.value = 1;
    //调用子组件实例方法获取完整已有的SPU的数据
    refArticleForm.value.initHasArticleData(row);
}
//按昵称搜索
const getArticleList = async (pager = 1) => {
    //当前页码
    pageNo.value = pager;
    let result: TArticleListResponseData = await reqArticleList(pageNo.value, pageSize.value, keyword.value,keyColumnId.value);
    if (result.code == 0) {
        total.value = result.data.total
        tableValuekArr.value = result.data.list;
    }
}

//分页器下拉菜单的自定义事件的回调
const handler = () => {
    getArticleList();
}

const isDisabled = computed(() => {
    return !keyword.value && !keyColumnId.value;
});

const allColumn = ref<TColumn[]>([])

const getAllColumn = async () => {
    let result: TColumnListResponseData = await reqColumnList(1, 100, '')
    allColumn.value = result.data.list
}

onMounted(async () => {
    getArticleList();
    await getAllColumn()
});


const showAddDialog = () => {
    //对话框显示
    scene.value = 1
    //初始化表单数据

    refArticleForm.value.initAddColumn()
}


//气泡确认框确定按钮的回调
const remove = async (id: string) => {
    //点击确定按钮删除已有品牌请求
    let result = await reqDeleteArticle(id);
    if (result.code == 0) {
        //删除成功提示信息
        ElMessage({
            type: 'success',
            message: '删除成功'
        });
        //再次获取已有的品牌数据
        getArticleList(tableValuekArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}


</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>